<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        html, body {
            width: 100%;
            min-width: 1176px;
            min-height: 1200px;
            font-size: 16px;
            margin: auto;
            background-color: #F4F6FA;
            font-weight: 400;
            font-family: Helvetica, sans-serif;
        }
        #site-headline {
            padding-top: 2rem;
            background-image: linear-gradient(120deg, #b8daee 30%, rgb(29, 140, 252) 46%, #d2d7f8 70%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 1.6rem;
            font-weight: 600;
            text-align: center;
            letter-spacing: .2rem;
        }
        table {
            width: 100%;
            background-color: #fff;
            margin: 20px auto;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            font-size: 16px;
            color: #333;
            border-bottom: 1px dashed #ddd;
            text-align: center;
        }
        th {
            font-weight: 600;
        }
        .num button {
            width: 30px;
            height: 30px;
            color: #666;
            font-size: 1.4rem;
            text-align: center;
            line-height: 30px;
            border: none;
            background-color: #f9f9f9;
            cursor: pointer;
        }
        .num input {
            height: 30px;
            width: 50px;
            text-align: center;
            color: #555;
            font-size: .9rem;
            border: 1px solid #ddd;
            position: relative;
            top: -2px;
            outline: none;
        }
        td span {
            color: #999;
            font-size: 13px;
        }
        .price {
            color: red;
            font-weight: 600;
        }
        input[type='checkbox'] {
            margin-right: 5px;
        }
        .del {
            font-weight: 600;
            color: brown;
            cursor: pointer;
        }
        .cart-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background-color: #f9f9f9;
        }
        .cart-footer .total {
            color: #e91e63;
            font-size: 18px;
        }
        .cart-footer button {
            background-color: #e91e63;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1 id="site-headline">Vue购物车结算</h1>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" v-model="selectAll"></th>
                <th>手机</th>
                <th>单价(元)</th>
                <th>数量</th>
                <th>小计(元)</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in items" :key="index">
                <td><input type="checkbox" v-model="item.selected"></td>
                <td><img :src="item.image" alt="商品图片" style="width: 60px; height: 60px;"><br>{{ item.name }}</td>
                <td class="price">{{ item.price }}</td>
                <td class="num">
                    <button @click="decreaseQuantity(index)">-</button>
                    <input type="number" v-model="item.quantity" min="1">
                    <button @click="increaseQuantity(index)">+</button>
                </td>
                <td class="price">{{ (item.price * item.quantity).toFixed(2) }}</td>
                <td><button @click="removeItem(index)">删除</button></td>
            </tr>
        </tbody>
    </table>
    <div class="cart-footer">
        <div>
            <input type="checkbox" v-model="selectAll">
            <span>全选</span>
            <button @click="removeSelectedItems">删除选中商品</button>
            <span>共有{{ items.length }}件商品,已选择{{ selectedItems.length }}件</span>
        </div>
        <div>
            <p>合计：￥{{ totalPrice }}</p>
            <button @click="checkout">去结算</button>
        </div>
    </div>

    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                items: [
                    { name: '魅族 16Xs', price: 1499, quantity: 2, selected: true, image: 'https://via.placeholder.com/60' },
                    { name: '魅族 16s', price: 2699, quantity: 1, selected: false, image: 'https://via.placeholder.com/60' },
                    { name: '魅族 16s Pro', price: 2999, quantity: 2, selected: true, image: 'https://via.placeholder.com/60' },
                    { name: '魅族 16T', price: 2499, quantity: 5, selected: false, image: 'https://via.placeholder.com/60' }
                ],
                selectAll: false
            },
            computed: {
                totalPrice() {
                    return this.items.reduce((total, item) => {
                        return total + (item.selected ? item.price * item.quantity : 0);
                    }, 0).toFixed(2);
                },
                selectedItems() {
                    return this.items.filter(item => item.selected);
                }
            },
            methods: {
                selectAll() {
                    this.items.forEach(item => item.selected = this.selectAll);
                },
                increaseQuantity(index) {
                    this.items[index].quantity++;
                },
                decreaseQuantity(index) {
                    if (this.items[index].quantity > 1) {
                        this.items[index].quantity--;
                    }
                },
                removeItem(index) {
                    this.items.splice(index, 1);
                },
                removeSelectedItems() {
                    this.items = this.items.filter(item => !item.selected);
                },
                checkout() {
                    alert('结算功能尚未实现');
                }
            }
        }).mount('#app');
    </script>
</body>
</html>